<template>
	<view class="container">

		<!-- 切换标签 -->
		<view class="tab-bar">
			<text :class="['tab-item', { 'active': isLogin }]" @click="switchTab('login')">登录</text>
			<text :class="['tab-item', { 'active': !isLogin }]" @click="switchTab('register')">注册</text>
		</view>
		<view v-if="isLogin">
			<view class="form-item">
				<text class="label">手机</text>
				<input class="input" type="number" v-model="dataJson.mobile" placeholder="请输入手机号"
					placeholder-class="placeholder" />
			</view>
			
			<!-- 提交按钮 -->
			<button class="submit-btn" @tap="handleLogin">登录</button>
		</view>
		<view v-else>
			<!-- 表单内容 -->
			<view class="form-item">
				<text class="label">手机</text>
				<input class="input" type="number" v-model="dataJson.mobile" placeholder="请输入手机号"
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label">用户名</text>
				<input class="input" v-model="dataJson.userName" placeholder="请输入昵称" placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label">所在城市</text>
				<input class="input" placeholder="填写您的所在城市" v-model="dataJson.address"
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label">性别</text>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<input class="input" placeholder="" v-model="array[index]" placeholder-class="placeholder" />
				</picker>
			</view>
			
			<!-- 提交按钮 -->
			<button class="submit-btn" @tap="handleSubmit">提交</button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: true, // 默认显示登录
				index: 0,
				array: ['男', '女'],
				dataJson: {
					name: '',
					userName: '',
					mobile: '',
					password: '12345',
					sex: 0,
					address: '',
				}
			}
		},
		methods: {
			// 切换标签
			switchTab(type) {
				this.isLogin = type === 'login'
			},
			handleLogin(){
				this.loginPerson()
			},
			handleSubmit() {
				this.$rqt.cratePerson(this.dataJson).then((res) => {
					if (res.code == 200) {
						this.loginPerson();
						uni.hideLoading()
					}
					uni.hideLoading()
				})
			},
			loginPerson() {
				this.$rqt.loginPerson({
					mobile: this.dataJson.mobile,
					password: this.dataJson.password,
				}).then((res) => {
					if (res.code == 200) {
						uni.setStorageSync('phone', res.data.mobile)
						uni.setStorageSync('pId', res.data.id)
						uni.switchTab({
							url: '/pages/index/index4'
						})
						uni.hideLoading()
					}
					uni.hideLoading()
				})
			},
			// 
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.dataJson.sex = e.detail.value
			},

		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
	}

/* 切换标签样式 */
.tab-bar {
  display: flex;
  margin-bottom: 60rpx;
  border-bottom: 2rpx solid #eee;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 32rpx;
    color: #666;
    &.active {
      color: #e64340;
      border-bottom: 4rpx solid #e64340;
    }
  }
}
	.form-item {
		margin-bottom: 40rpx;

		.label {
			display: block;
			font-size: 30rpx;
			color: #333;
			margin-bottom: 15rpx;
		}

		.input {
			height: 80rpx;
			padding: 0 20rpx;
			border: 1rpx solid #eee;
			border-radius: 8rpx;
			font-size: 28rpx;
		}

		.placeholder {
			color: #999;
		}
	}

	.submit-btn {
		margin-top: 60rpx;
		background-color: #e64340;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;

		&::after {
			border: none;
		}
	}

	.search-icon {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 50%;
	}
</style>